<template>
  <div style="width: auto;height: 225px" id="echarts2">
  </div>
</template>
 
<script>
import echarts from 'echarts'
export default {
  name: 'echarts2',
  data () {
    return {
      // option配置
      option: {
        title: {
          text: '管道信息',
          left: 'center',
          textStyle: {
            color: '#FFA07A'
          }
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'right',
          textStyle: {
            color: '#f58220'
          }
        },
        series: [
          {
            name: '类型',
            type: 'pie',
            radius: '70%',
            center: ['50%', '56%'],
            color: [
              '#fcaf17',
              '#FFA07A',
              '#ffce7b'
            ],
            label: {
            show: false,
           },
            data: [
              { value: 1048, name: '水管' },
              { value: 735, name: '电管' },
              { value: 580, name: '暖气' },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.2)'
              }
            }
          }
        ]
      }
    }
  },
  mounted () {
    this.echartsInit()
  },
  methods: {
    echartsInit () {
      // 在生命周期中挂载
      echarts.init(document.getElementById('echarts2')).setOption(this.option)
    }
  }
}
</script>
 
<style scoped>
 
</style>